<template>
  <div class="VehicleArchivesCommpents">
    <!-- cell组件 -->
    <el-table :data="TableList" style="width: 100%" v-loading="loading">
      <el-table-column fixed prop="damageTypeName" label="受损类型" class="Background#eee"></el-table-column>
      <el-table-column prop="enterprise" label="航空运输企业"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="Driverfiledetails(scope.row.id)"
            type="text"
            size="small"
          >查看明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="VehicleArchivesPagination">
      <button @click="PageRemove">上一页</button>
      <span>{{page}}/{{total}}</span>
      <button @click="PageAdd">下一页</button>
    </div>
    <router-link to="/AviationSubmissionForm">
      <el-button type="primary" style="width:90%;margin-top:0.5rem;">登记外来物损伤航空器信息</el-button>
    </router-link>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      total: "",
      tableData4: [],
      page: 1,
      loading: false,
      TableList: [],
      DataForm: {
        limit: "5",
        type: "",
        page: 1
      }
    };
  },
  components: {},
  created() {},
  computed: {},
  mounted() {
    this.$store.commit("SET_USER_INFO", "外来物损伤航空器信息");
    this.GetData();
  },
  watch: {},
  methods: {
    Driverfiledetails(val) {
      this.$router.push({
        path: "/InformationAircraftdetails",
        query: { id: val }
      });
    },
    // 获取列表
    GetData() {
      this.loading = true;
      this.$store.dispatch("damage", this.DataForm).then(data => {
        this.total = Math.round(data.total / 5);
        this.TableList = data.list;
        this.loading = false;
      });
    },
    // 上一页
    PageAdd() {
      if (this.page == this.total) {
        MessageBox({
          title: "提示",
          message: "不能再往后了"
        });
      } else {
        this.DataForm.page = this.page + 1;
        this.page = this.DataForm.page;
        this.GetData();
      }
    },
    // 下一页
    PageRemove() {
      if (this.page == 1) {
        MessageBox({
          title: "提示",
          message: "不能再往前了"
        });
      } else {
        this.DataForm.page = this.page - 1;
        this.page = this.DataForm.page;
        this.GetData();
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scpoed>
.item {
  display: inline-block;
}

.nav {
  padding: 10px;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
.nav button {
  width: 32%;
  font-size: 0.22rem;
  background: #fff;
  border: 1px solid #409eff;
  color: #409eff;
  margin-top: 0.2rem;
  padding: 0;
  height: 1rem;
  line-height: 1rem;
}
.cell {
  text-align: center;
}
.Green1 {
  background: #409eff !important;
  color: #fff !important;
}
.VehicleArchivesPagination button {
  width: 32%;
  font-size: 0.22rem;
  background: #fff;
  border: 1px solid #409eff;
  color: #409eff;
  margin-top: 0.2rem;
  padding: 0;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
  outline: none;
}
.VehicleArchivesCommpents {
  margin-top: 0.15rem;
}
</style>
